<template>
  <div class="homeicons">
    <swiper>
        <swiper-slide>
            <div class="icon" v-for="item of iconList" :key="item.id">
                <div class="icon-img">
                    <img class="icon-img-content" :src="item.imgUrl">
                </div>
                <p class="icon-desc">{{item.title}}</p>
            </div>
        </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  props:{
    iconList:Array
  },
  data() {
      return {
        swiperOptions: {
          pagination: '.swiper-pagination',
        }
      }
    },
}
</script>

<style lang="stylus" scoped>
.homeicons
    width 100%
    height 1.6rem
    background-color #fff
    border-top 1px solid #dbdbdb
    border-bottom 1px solid #dbdbdb
.icon
    width 20%
    height 1.2rem
    float left
    text-align center
    margin-top .2rem
    .icon-img-content
        width .8rem
        // border 1px solid #666666
        // border-radius 50%
        // padding .1rem
</style>